<template>
  <div class="app-container">
    <div class="sub-store-order">
      <el-row :gutter="20" style="background: #f5f5f5">
        <el-col v-for="(itm, idx) in step" :key="idx" :span="8">
          <div :class="idx === current ? 'avtive' : 'buy-step'">
            {{ itm }}
          </div>
        </el-col>
      </el-row>
      <div v-if="current === 1" class="vueqr-main">
        <div class="vueqr-main-title">{{ orderDetail.title }}</div>
        <VueQr :text="qrText" :options="qrOptions" />
        <div class="vueqr-main-price">{{ orderDetail.pay_price }}</div>
        <div class="vueqr-main-help">请使用微信扫码，支付成功后自动开通服务</div>
      </div>
      <div v-if="current === 2" class="">
        <!-- <payment :price="price" :detail="detail" /> -->
        <success :order-detail="orderDetail" @closePage="closePage" />
      </div>
    </div>
  </div>
</template>
<script>
import { subOrderDetail } from './api'
import payment from './components/payment'
import success from './components/success'
import VueQr from 'vue-qr'

export default {
  components: {
    VueQr,
    payment,
    success
  },
  data() {
    return {
      qrText: '', // 二维码的文本内容
      qrOptions: {
        size: 200, // 二维码的尺寸
        level: 'L', // 二维码的容错级别
        colorDark: '#000000', // 二维码的暗色（前景色）
        colorLight: '#ffffff' // 二维码的亮色（背景色）
      },
      orderDetail: {},
      step: ['1.选择服务', '2.确认付款', '3.完成订购'],
      current: 1,
      typenum: 0,
      price: 0,
      addons_id: 0,
      order_id: 0,
      detail: 0,
      goodsdetail: '',
      detailTime: null
    }
  },
  created() {
    this.order_id = this.$route.params.order_id
    this.qrText = this.$route.params.qrcode.code_url
    this.detailTime = setInterval(() => {
      this.getDetail()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.detailTime)
  },
  methods: {
    getDetail() {
      const that = this
      const data = {
        order_id: this.order_id
      }
      subOrderDetail(data).then((res) => {
        that.orderDetail = res.data
        if (res.data.order_status > 0) {
          that.current = 2
          clearInterval(this.detailTime)
        }
      })
    },
    changecurrent(data, price, addons_id, order_id) {
      console.log('data', data, price, addons_id)
      this.price = price
      this.current = data
      this.addons_id = addons_id
      this.order_id = order_id
    },
    handlepay(data, detail) {
      this.current = data
      this.detail = detail
    },
    closePage(toName) {
      this.$store.dispatch('app/closePage', {
        vm: this,
        fromName: this.$route.name,
        toName: toName.name,
        params: {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sub-store-order {
  background-color: #fff;
  padding: 23px 23px 100px;
}
.buy-step {
  background: #f5f5f5;
  padding: 20px 0;
  color: #333;
  font-size: 15px;
  text-align: center;
}
.vueqr-main {
    margin: 0 auto;
    text-align: center;
    margin-top: 70px;
  .vueqr-main-title{
    text-align: center;
  }
  .vueqr-main-price {
    height: 50px;
    font-size: 18px;
    color: #ff0000;
    &:before {
        content: "¥";
        display: inline-block;
        margin-right: 3px;
      }
  }
}
.avtive {
  background-color: #191b5c;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  position: relative;
}
.avtive::after {
  content: "";
  display: block;
  position: absolute;
  right: -30px; /* 箭头位置 */
  top: 0; /* 箭头位置 */
  border-top: 30px solid transparent; /* 箭头高低 */
  border-bottom: 30px solid transparent; /* 箭头高低 */
  border-left: 30px solid #191b5c; /* 箭头长度*/
}
.edition-title {
  color: #4d4d4d;
  font-size: 15px;
  margin: 27px 0;
  padding: 0 16px;
  border-left: 1px solid #5357cb;
}
.ty-btns {
  width: 34px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #aaadec;
  color: #aaadec;
  font-size: 11px;
  text-align: center;
  line-height: 20px;
  margin-top: 20px;
}
.price-type {
  padding: 13px 25px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #d2d2d2;
}
.typeactive {
  border: 1px solid #5357cb;
}
.type-pri {
  color: #ff0000;
  margin: 16px 0 9px;
}
.bot-sumb {
  position: fixed;
  bottom: 26px;
  width: 100%;
  padding: 22px 0;
  background-color: #fff;
}
.total-price {
  font-size: 13px;
  margin: auto 28px;
}
</style>
